<script setup lang="ts">
import { OrderStatus } from '@/enum'
import { getMedicineDetailPay } from '@/services/medicine'
import type { Medicine, OrderDetail } from '@/types/medicine'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import MedicineList from './components/MedicineList.vue'

const route = useRoute()
const medicines = ref<Medicine[]>([])
const medicineDetail = ref<OrderDetail>()
// 获取药品详情
const getMedicine = async () => {
  try {
    const data = await getMedicineDetailPay(route.params.id as string)
    medicines.value = data.data.medicines
    medicineDetail.value = data.data
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  getMedicine()
})
</script>

<template>
  <div class="order-detail-page" v-if="medicineDetail">
    <DP-NavBar
      title="药品订单详情"
      :back="
        () => {
          $router.push({
            name: 'ConsultRoom',
            query: { orderId: medicineDetail?.roomId }
          })
        }
      "
    ></DP-NavBar>
    <!-- 物流详情 -->
    <div class="logistics">
      <div
        class="card"
        v-if="medicineDetail.status === OrderStatus.MedicinePay"
      >
        暂无物流信息，请支付后查看
      </div>
      <div
        class="card"
        v-else-if="medicineDetail.status === OrderStatus.MedicineCancel"
      >
        订单已取消，请重新生成订单
      </div>
      <div
        class="card"
        v-else-if="medicineDetail.status === OrderStatus.MedicineSend"
      >
        仓库正在准备发货，请耐心等待
      </div>
      <div class="card" v-else>
        <div class="info">
          <p class="arrive">
            {{ medicineDetail?.expressInfo.content }}
          </p>
          <p class="time">{{ medicineDetail?.expressInfo.time }}</p>
        </div>
        <div class="arrow">
          <van-icon
            name="arrow"
            color="var(--cp-tag)"
            @click="
              $router.push({
                name: 'LogisticsDetail',
                params: { id: route.params.id }
              })
            "
          />
        </div>
      </div>
    </div>
    <!-- 药品详情 -->
    <div class="medicineList">
      <medicine-list :medicine-arr="medicineDetail?.medicines"></medicine-list>
    </div>
    <!-- 药品金额，订单信息集合 -->
    <div class="group">
      <van-cell-group>
        <van-cell
          title="药品金额"
          :value="`￥${medicineDetail?.actualPayment.toFixed(2)}`"
        ></van-cell>
        <van-cell
          title="运费"
          :value="`￥${medicineDetail?.expressFee}`"
        ></van-cell>
        <van-cell
          title="优惠券"
          :value="`-￥${medicineDetail?.couponDeduction}`"
        ></van-cell>
        <van-cell
          title="实付款"
          :value="`￥${medicineDetail?.actualPayment}`"
          class="red"
        ></van-cell>
        <van-cell title="订单编号" :value="medicineDetail?.orderNo"></van-cell>
        <van-cell
          title="创建时间"
          :value="medicineDetail?.createTime"
        ></van-cell>
        <van-cell title="支付时间" :value="medicineDetail?.payTime"></van-cell>
        <van-cell
          title="支付方式"
          :value="medicineDetail?.paymentMethod ? '支付宝' : '微信'"
        ></van-cell>
      </van-cell-group>
    </div>
    <div class="confirm">
      <van-button
        type="primary"
        block
        round
        v-if="medicineDetail.status === OrderStatus.MedicinePay"
        >重新支付
      </van-button>
      <van-button
        type="primary"
        block
        round
        :to="{ name: 'ConsultRoom', query: { orderId: medicineDetail.roomId } }"
        v-else-if="medicineDetail.status === OrderStatus.MedicineCancel"
        >订单取消</van-button
      >
      <van-button
        type="primary"
        block
        round
        v-else-if="medicineDetail.status === OrderStatus.MedicineSend"
        >待发货</van-button
      ><van-button type="primary" block round v-else>确认收货</van-button>
    </div>
  </div>
  <div class="order-detail-page" v-else>
    <DP-NavBar title="药品订单详情"></DP-NavBar>
    <van-skeleton title :row="3" />
    <van-skeleton title :row="4" />
  </div>
</template>

<style lang="scss" scoped>
.order-detail-page {
  margin-top: 46px;
  padding-bottom: 65px;
  $price_red: #eb5757;
  :deep(.van-cell__title) {
    flex: none;
  }
  .logistics {
    padding: 15px;
    position: relative;
    &::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 80px;
      top: 0;
      left: 0;
      background: linear-gradient(
        180deg,
        rgba(44, 181, 165, 0),
        rgba(44, 181, 165, 0.2)
      );
      border-bottom-left-radius: 60px;
      border-bottom-right-radius: 60px;
    }
    .card {
      height: 74px;
      padding: 0 15px;
      background-color: #fff;
      border-radius: 8px;
      position: relative;
      display: flex;
      align-items: center;
      box-shadow: 0 0 22px #e5e5e580;
      .info {
        flex: 1;
        .arrive {
          color: var(--cp-primary);
        }
        .time {
          color: var(--cp-tag);
          margin-top: 10px;
        }
      }
    }
  }
  .medicineList {
    padding: 0 15px;
  }
  .red {
    :deep(.van-cell__value) {
      color: $price_red;
    }
  }
  .confirm {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 10px;
    background-color: #fff;
  }
}
</style>
